<template>
	<view class="content">
		<Header title="增加员工"></Header>
		<view class="toubu">
			<view class="content_content_con shadow">
				<view class="shangjia" v-for="(item,index) in list" :key="index">
					<view class="heise_ziti">{{item.title}}</view>
					<view v-if="item.img" class="qianhuione_ziti" @click="tanchu(index,item.add_kezi_xiabiao,item.tankuang_xiabiao)">
						<text class="two_eight" v-if="item.val!==''">
							{{item.val}}
						</text>
						<text class="two_eight" v-else>
							{{item.placeholder}}
						</text>
						<image :src="item.img">
					</view>
					<view  v-else >
						<input v-if="item.type=='text' || item.type=='number'" type="text" :placeholder="item.placeholder" v-model="item.val" class="shangjia_input"
							placeholder-class="shangjia_input_placeholder"  :maxlength="item.maxlength" >
						<input v-else type="password" :placeholder="item.placeholder" v-model="item.val" class="shangjia_input"
							placeholder-class="shangjia_input_placeholder"  :maxlength="item.maxlength" >
					</view>
						<!--  -->
						<!--  -->
				</view>
			</view>
			<view class="content_content_con shadow">
				<view class="shangjia">
					<view>账号状态</view>
					<view class="uni-padding-wrap uni-common-mt">
						<switch checked color="#FF609A" style="transform:scale(0.7)" @change="switch1Change" />
						<!-- <switch  style="transform:scale(0.7)"/> -->
					</view>
				</view>
			</view>
			
		</view>
		<view class="yinhangka_guanli__footer">
			<view class="anniu" @click="queding">确认添加员工</view>
		</view>
		<requestLoading></requestLoading>
	</view>
</template>

<script>
	 export default {
		data() {
			return {
				tishi: 1 ,//展示加载动画
				list: [{
						title: '姓名',
						val: '',
						placeholder:'请输入员工姓名',
						type:'text',
						maxlength:'30'
					},{
						title: '员工账号',
						val: '',
						placeholder:'请输入账号',
						type:'text',
						maxlength:'20'
					},{
						title: '联系方式',
						val: '',
						placeholder:'请输入员工联系方式',
						type:'number',
						maxlength:'11'
					},{
						title: '密码',
						val: '',
						type:'password',
						placeholder:'请输入密码',
						maxlength:'10'
					},{
						title: '确认密码',
						val: '',
						type:'password',
						placeholder:'请再次输入密码',
						maxlength:'10'
					}
				],
				dizhi_xiabiao:0, //昵称弹框
				beizhu:'',      //备注
				tupian_list:[],
				status:'0',
			} 
		},
		onLoad() {
		},
		methods:{
			queding(){
				var that = this;
				for (var i = 0; i < that.list.length; i++) {
					if (that.list[i].val == '') {
						uni.showToast({
							title: that.list[i].placeholder,
							icon: "none"
						});
						return false;
					}
					if (that.publics.patt1.test(that.list[i].val)) {
						uni.showToast({
							title: that.list[i].placeholder,
							icon: "none"
						});
						return false;
					}
				}
				if (that.list[2].val.length != 11) {
					uni.showToast({
						title: '手机号长度错误',
						icon: "none"
					});
					return false;
				}
				if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(that.list[2].val)){
					uni.showToast({
						title: '手机号格式错误',
						icon: "none"
					});
					return false;
				}
				if (!that.publics.password.test(that.list[3].val)) { // 判断密码
					uni.showToast({
						title: '密码格式错误,拼音+数字,不能低于六位',
						icon: "none"
					});
					return false;
				};
				if (that.list[3].val !== that.list[4].val) {
					uni.showToast({
						title: '两次密码不一致',
						icon: "none"
					});
					return false;
				}
				this.configure.ajax({
					url: 'wode/addUser',
					tishi: that.tishi,
					data: {
						nickname:that.list[0].val ,
						phonenumber:that.list[2].val ,
						password:that.list[3].val ,
						username:that.list[1].val ,
						status:that.status 
					},
					method: 'POST',
					success: function(res) {
						uni.showToast({
							title: '添加成功',
							icon: "none"
						});
						setTimeout(() => {
							that.publics.redirectTo("/view/me/yuangong_gl")
						}, 500);
					}
				})
			},
			// chuan(index){
			// 	var that=this;
			// 	if(that.tupian_list.length!==3){
			// 		shangchuan.ajax({
			// 			success: function(res) {
			// 				console.log(res)
			// 				if(index!==-1){
			// 					console.log('0')
			// 					that.tupian_list[index]=res;
			// 				}else{
			// 					console.log('1')
			// 					that.tupian_list.push(res);
			// 				}
			// 				that.$forceUpdate()
			// 				console.log(that.tupian_list.length)
			// 				console.log(that.tupian_list)
			// 			}
			// 		})
			// 	}else{
			// 		uni.showToast({
			// 			title: '最多上传三张图片',
			// 			icon: "none"
			// 		});
			// 	}
			// },
			switch1Change: function (e) {
				var that=this;
				that.status=e.detail.value ? 0 : 1;
				console.log(that.status,"that.status")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.heise_ziti {
		width:140rpx;
		text-align-last: justify;
		margin-right:40rpx;
		font-size:30rpx;
		// border: solid;
	}
	.bei_zhu{
		padding-top: 44rpx;
	}
	.shangjia view:last-child {
		font-size: 30rpx;
		image {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
			padding-left: 10rpx;
		}
	}
	.last_choose {
		font-size: 28rpx !important;
		color:$qianhuione_ziti;
		image {
			width: 40rpx;
			height: 40rpx;
			padding-left: 10rpx;
			vertical-align: middle;
		}
	}
	.shangjia_title {
		margin-top: 40rpx;
		margin-bottom: 30rpx;
		font-size: 30rpx;
		span {
			color: $qianhui_ziti;
			font-size: 20rpx;
			font-weight: 500;
		}
	}
	.add_input {
		font-size: 24rpx;
		color: $qianhui_ziti;
		text-align: left;
		margin-top: 48rpx;
	}
	.shangchaun_photo {
		text-align: center;
		background-color: $qianhui_white;
		width: calc(33.33% - 10rpx);
		height: 210rpx;
		border-radius: 12rpx;
		border: solid 10rpx $white_ziti;
		box-shadow: $shadow;
		margin-bottom: 40rpx;
		image{
			width: 60rpx;
			height: 60rpx;
			padding-top: 60rpx;
		}
		._photo{
			font-size: 26rpx;
			color:$qianhui_ziti;
		}
	}
	.shangchaun_photo:nth-child(2){
		margin: 0rpx 15rpx 40rpx 15rpx;
	}
	.shangchaun_photo view:nth-child(2) {
		margin: 0 10rpx 0 10rpx;
	}
	.yinhangka_guanli__footer {
		width: 100%;
		height: 140rpx;
		position: fixed;
		bottom: 260rpx;
		background: $white_ziti;
		view {
			margin-top: 30rpx;
		}
	}
	.add_city{
		color:$zhuce_color ;
		font-size: 24rpx;
		font-weight: 500;
		text-align: right;
		margin-right: 60rpx;
	}
	.beihzu{
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid var(--qianhui_white);
	}
	.shangchaun_photo_con{
		display: flex;
	}
</style>
